<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>日期和时间</title>
</head>
<script src="./Vue.js"></script>
<body>
	<div id="box">
		{{nowdate | formatDate}}
	</div>
	<script type="text/javascript">
		var formatNum = function(num){
			return num < 10 ? "0" + num : num;
		}
		var demo = new Vue({
			el : '#box',
			data : {
				nowdate : new Date()
			},
			filters : {
				formatDate : function(value){
					var year = value.getFullYear();
					var month = formatNum(value.getMonth() + 1);
					var date = formatNum(value.getDate());
					var hour = formatNum(value.getHours());
					var minute = formatNum(value.getMinutes());
					var second = formatNum(value.getSeconds());
					return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
				}
			},
		
			mounted : function(){
				var _this = this;
				var timer = setInterval(function(){
					_this.nowdate = new Date()
				},1000);
			},
		
			beforeDestroy : function(){
				  if(this.timer){
					clearInterval(this.timer); 
				  }
			}
		});
	</script>
	
</body>
</html>

